<template>
  <div class="tabberbox">
    <div @click="Pushpath(1)">
      <div :class="tab===1?'opacity-100':'opacity-25'">
        <img src="@/assets/images/tabber/farm.png">
        <div>
          Farm
        </div>
      </div>
    </div>
    <div @click="Pushpath(2)" :class="tab===2?'opacity-100':'opacity-25'">
      <img src="@/assets/images/tabber/account.png">
      <div>
        Account
      </div>
    </div>
    <div @click="Pushpath(3)" :class="tab===3?'opacity-100':'opacity-25'">
      <img src="@/assets/images/tabber/swap.png">
      <div>
        Swap
      </div>
    </div>
    <div @click="Pushpath(4)" :class="tab===4?'opacity-100':'opacity-25'">
      <img src="@/assets/images/tabber/withdraw.png">
      <div>
        Withdraw
      </div>
    </div>
    <div @click="Pushpath(5)" :class="tab===5?'opacity-100':'opacity-25'">
      <img src="@/assets/images/tabber/share.png">
      <div>
        Share
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['tab'],
  data() {
    return {}
  },
  mounted() {

  },
  methods: {
    Pushpath(num) {
      if (this.tab != num) {
        switch (num) {
          case 1:
            this.$router.push('/');
            break;
          case 2:
            this.$router.push('/account');
            break;
          case 3:
            this.$router.push('/swap');
            break;
          case 4:
            this.$router.push('/withdraw');
            break;
          case 5:
            this.$router.push('/share');
            break;
        }
      }
    }
  }
}
</script>
<style scoped>
.tabberbox {
  box-shadow: -10px -10px 20px 1px rgba(149, 159, 255, .25);
  height: 50px;
  background: linear-gradient(#f7fcff, #dcecff);
  display: flex;
  width: 100%;
  position: fixed;
  z-index: 9;
  bottom: 0;
  left: 0;
}

.tabberbox img {
  padding-top: 7px;
  margin-bottom: -3px;
  width: 20px;
  height: 20px;
}

.tabberbox > div {
  flex: 1;
  font-size: 11px;
  text-align: center;
  font-weight: 600;
}

.opacity-25 {
  opacity: .25;
}

.opacity-100 {
  opacity: 1;
}
</style>
